import { Component } from "react";
import './Footer.css'

export class Footer extends Component {
    render() {
        const { todos, allCheckedChanged, handleRemoveCompleted } = this.props
        const completedCount = todos.reduce((pre, current) => current.completed ? pre+1 : pre,0)
        const allCompleted = todos.length === todos.filter(todo => todo.completed).length

        console.log();
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" checked={allCompleted} onChange={allCheckedChanged}/>
                </label>
                <span>
                    <span>已完成{completedCount}</span> / 全部{todos.length}
                </span>
                <button className="btn btn-danger" onClick={handleRemoveCompleted}>清除已完成任务</button>
            </div>
        )
    }
}